<template>
	<div class="nav_com layer">
		<!-- <div class="nav_cont">
			<div class="item_box" v-for="(item,index) in navList" :key="index" @click.stop="handleNav(item)">
				<img :src="item.path == active || item.alias == active ? item.activeIcon : item.icon" class="icon" />
				<p :style="item.path == active || item.alias == active ? 'color: #0DF5E3' : ''">{{item.name}}</p>
			</div>
		</div> -->
		<van-tabbar route fixed :border="false" active-color="#0DF5E3" inactive-color="#999">
			<van-tabbar-item replace :to="item.path" v-for="(item,index) in navList" :key="index">
				<template #icon="props">
					<img :src="item.path == active || item.alias == active ? item.activeIcon : item.icon" />
				</template>
				{{item.name}}
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

			}
		},
		computed: {
			active() {
				return this.$route.name
			},
			navList() {
				const navList = [{
					name: this.$t('nav.Wallet'),
					path: '/',
					alias: '/home',
					icon: require('@/assets/images/nav/icon0.png'),
					activeIcon: require('@/assets/images/nav/icon0_.png'),
				}, {
					name: this.$t('nav.Trade'),
					path: '/Trade',
					icon: require('@/assets/images/nav/icon1.png'),
					activeIcon: require('@/assets/images/nav/icon1_.png'),
				}, {
					name: this.$t('nav.My'),
					path: '/My',
					icon: require('@/assets/images/nav/icon2.png'),
					activeIcon: require('@/assets/images/nav/icon2_.png'),
				}]
				return navList
			}
		},
		watch: {},
		mounted() {},
		methods: {
			handleNav(item) {
				this.$router.push(item.path)
			}
		}
	}
</script>

<style scoped lang="less">
	.nav_com {

		// height: 110px;
		// width: 100%;
		.van-tabbar {
			left: 50%;
			width: calc(100% - 40px);
			max-width: 750px;
			transform: translateX(-50%);
			height: 67px;
			margin-bottom: 30px;
			// margin: 0 20px 30px;
			border-radius: 17px;
			background: #222222;

			::v-deep .van-tabbar-item--active {
				background-color: transparent;
			}
		}

		.nav_cont {
			position: fixed;
			bottom: 33px;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 40px);
			max-width: 1060px;
			border-radius: 16px;
			background-color: #222222;
			padding: 14px 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			-webkit-overflow-scrolling: touch;

			.item_box {
				text-align: center;

				.icon {
					width: 30px;
					height: 24px;
				}

				span {
					font-size: 12px;
					color: #999999;
				}
			}
		}

	}
</style>